<div
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
  id="meta_modal"
  v-kb-modal="isShow"
>
  <div class="modal-dialog" v-show="isShow">
    <div class="modal-content">
      <div class="modal-header">
        <button @click="reset" class="close"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title">Meta</h4>
      </div>
      <div class="modal-body">
        <div class="form-horizontal">
          <div class="form-group">
            <div class="col-md-12">
              <kb-multilang-selector
                v-if="multiLangs"
                :cultures="multiLangs.cultures"
                :default-culture="multiLangs.default"
              ></kb-multilang-selector>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label"
              >{{Kooboo.text.common.name}}</label
            >
            <div class="col-md-9">
              <input
                type="text"
                v-kb-typeahead="{source:possibleMetaName,items: 6}"
                class="form-control"
                :disabled="!enableName"
                v-model="name"
              />
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label">HTTP-equiv</label>
            <div class="col-md-9">
              <select
                class="form-control"
                :disabled="!enableHttpEquiv"
                v-model="httpEquiv"
              >
                <option
                  v-for="$data in possibleHttpEquiv"
                  :key="$data"
                  :value="$data"
                  >{{$data}}</option
                >
              </select>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-3 control-label">Charset</label>
            <div class="col-md-9">
              <input
                type="text"
                v-kb-typeahead="{source:possibleCharset,items: 6}"
                :disabled="!enableCharset"
                class="form-control"
                v-model="charset"
              />
            </div>
          </div>
          <div
            v-for="(content,index) in multiContents"
            :key="index"
            v-kb-collapsein="content.show"
            class="form-group"
          >
            <label class="col-md-3 control-label">
              <span>{{Kooboo.text.component.pageEditor.content}}</span>
              <template v-if="!content.isDefault">
                {{content.name}}
              </template>
            </label>
            <div class="col-md-9">
              <textarea
                type="text"
                class="form-control autosize"
                v-model="content.value"
                :disabled="!content.enable"
              ></textarea>
              <template v-for="($data,i) in metaBindingHelpers">
                <div
                  class="btn-group margin-top-10"
                  :key="i"
                  v-if="content.enable"
                >
                  <a
                    class="btn btn-xs btn-default"
                    @click="metaHelp($data,content)"
                    href="javascript:;"
                    style="margin-right: 5px;"
                    >{{'{'+$data+'}'}}</a
                  >
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn green" @click="save"
          >{{Kooboo.text.common.save}}</button
        >
        <button @click="reset" class="btn gray"
          >{{Kooboo.text.common.cancel}}</button
        >
      </div>
    </div>
  </div>
</div>
